<template>
	<view class="bigBox">
		<navBar isBack title="银行卡管理" backColor="#fff" background="linear-gradient(45deg, #5B6E84 0%, #40464D 100%)" color="#fff"></navBar>
		<!-- <view
			style="position: fixed;width: 100%;z-index: 999;background: #fff;display: flex;align-items: center;padding: 20rpx 32rpx;justify-content: space-between;border-bottom: 1px solid #F1F1F1;"
		>
			<view></view>
			<view style="display: flex;align-items: center;">
				<view  @click="addCard" style="background: #DBA957;padding: 6rpx 24rpx;border-radius: 32rpx;font-size: 26rpx;color: #FFF;margin-right: 20rpx;">添加</view>
				<view @click="delCard" style="padding: 6rpx 24rpx;border-radius: 32rpx;font-size: 26rpx;color: #666;border: 1px solid #666;">{{delStatus ?'取消':'编辑'}}</view>
			</view>
		</view> style="margin-top: 60px;" -->
		<view>
			<view class="bankCardList" v-for="(item, index) in cardList" :key="index" @click="selectCard(item)">
				<view class="bankTop">
					<!-- <image src="https://manager.ryz1620.com/distri/bankLogo.png" mode=""></image> -->
					<view>
						{{ item.bank_name }}
						<span>{{ item.card_type == 1 ? '储蓄卡' : '信用卡' }}</span>
					</view>
				</view>
				<view class="bankBottom">
					<!-- ··· ··· ··· 6587 -->
					{{ item.card_no }}
				</view>
				<image v-if="delStatus" class="delImg" @click.stop="stopBind(item.id)" :src="`${baseImg}/static/adminShop/delImg.png`" mode=""></image>
			</view>
		</view>
		<view class="addBtn" @click="addCard">
			<u-icon name="plus" color="#191919" size="36"></u-icon>
			<span>添加银行卡</span>
		</view>
		<!-- <view class="addBtn" @click="addCard" v-if="memberType == 2 && cardList.length == 0">
			<u-icon name="plus" color="#191919" size="36"></u-icon>
			<span>添加银行卡</span>
		</view> -->
		<view class="addBtn" v-if="cardList.length > 0" @click="delCard">
			<u-icon v-if="!delStatus" name="trash" color="#191919" size="36"></u-icon>
			<u-icon v-else name="arrow-left-double" color="#191919" size="36"></u-icon>
			<span>{{ delText }}</span>
		</view>
		<view style="flex: 1;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);" v-if="cardList.length > 0 && isloadShow">
			<u-loadmore :status="loadStatus"></u-loadmore>
		</view>
	</view>
</template>

<script>
import navBar from '@/components/navBar/navBar.vue';
import Https from '@/service/verification.js';
// import service_distri from '@/service/distri.js'
export default {
	data() {
		return {
			baseImg: this.$static,
			cardList: [],
			selectBank: false,
			level: null,
			delStatus: false,
			delText: '删除银行卡',
			page: 1,
			memberType: null, //会员类型(2企业会员,3个人会员)

			isloadShow: false,
			loadStatus: 'loadmore',
			total: 0,
			isMaster:null,
			
		};
	},
	onLoad(options) {
		console.log(options, '选择银行卡');
		// this.memberType = options.memberType;
		this.selectBank = options.type == 'true' ? true : false;
		this.level = options.level;
		this.isMaster = uni.getStorageSync('isMaster')
		// console.log(this.level,'角色')
		
	},
	onShow() {
		this.getBindCardList();
	},
	onReachBottom() {
		var that = this;
		that.page++;
		that.isloadShow = true;
		that.loadStatus = 'loading';
		uni.showLoading({
			title: '加载中...'
		});
		let params = {
			page: that.page,
			level:this.level
		};
		Https.GetBankCardList(params).then(res => {
			if (res.code == 1) {
				// that.total = res.data.total
				var list = res.data.list;
				// that.flowList = res.data.products
				if (list.length > 0) {
					that.cardList = that.cardList.concat(list);
				} else {
					// that.cardList = [];
					that.loadStatus = 'nomore';
				}
				// console.log(res.data);
			} else {
				that.$utils.showErr({
					title: res.msg
				});
			}
		});
		setTimeout(function() {
			uni.hideLoading();
			this.loadStatus = 'nomore';
		}, 500);
	},
	methods: {
		getBindCardList() {
			var that = this;
			let params = {
				page: that.page,
				level:this.level
			};
			Https.GetBankCardList(params).then(res => {
				// console.log(res,'已绑定银行卡列表')
				if (res.code == 1) {
					// console.log(res);
					that.memberType = res.data.member_type;
					that.cardList = res.data.list ? res.data.list : [];
				}
			});
		},

		// 绑定银行卡
		addCard() {
			uni.navigateTo({
				url: '/pages_Verification/verification/bankCard/BankCard?memberType=' + this.memberType
			});
		},

		// 银行卡解绑
		stopBind(id) {
			var that = this;
			uni.showModal({
				content: '确定解绑该银行卡吗？',
				success: res => {
					if (res.confirm) {
						let params = {
							card_id: id
						};
						Https.DelBankCard(params).then(res => {
							console.log(res, '解绑结果');
							if (res.code == 1) {
								uni.showToast({
									title: '解绑成功',
									icon: 'success'
								});
								this.getBindCardList();
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						});
					}
				}
			});
		},
		// 删除银行卡按钮
		delCard() {
			const that = this;
			that.getAccountInfo()
			if(that.isRealname == 1){
				if (this.delStatus) {
					this.delStatus = false;
					this.delText = '删除银行卡';
				} else {
					this.delStatus = true;
					this.delText = '取消删除';
				}
			}
		},

		// 选择银行卡到提现页
		selectCard(item) {
			if (this.selectBank) {
				// console.log(item, '选择的银行卡');
				let num = item.card_no.split('*');
				// console.log(num.slice(-1)*1,'截取')
				let nowCardInfo = {
					bank_name: item.bank_name,
					card_id: item.id,
					bank_num: num.slice(-1),
					type: item.card_type,
					phone:item.phone
				};
				// console.log(nowCardInfo, '+++++');
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				// console.log(pages);
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				// console.log(prevPage);
				prevPage.$vm.cardInfo = nowCardInfo;
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.bigBox {
	height: 100%;
	background-color: #fff;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.bankCardList {
	background-color: #fff;
	position: relative;
	width: 702rpx;
	height: 244rpx;
	border-radius: 8rpx;
	background-color: #18b566;
	margin: 20rpx auto;
	display: flex;
	image {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
	}
	flex-direction: column;
	justify-content: space-between;
	padding: 40rpx 48rpx;
	font: 400 28rpx/40rpx PingFang SC;
	color: #fff;
	.bankTop {
		display: flex;
		align-items: center;
		view {
			display: flex;
			flex-direction: column;
			margin-left: 14rpx;
			span {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.6);
			}
		}
	}
	.bankBottom {
		font: 500 60rpx/60rpx PingFang SC;
		text-align: center;
	}
	.delImg {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
}
.addBtn {
	padding: 0 40rpx;
	background-color: #f6f7fb;
	width: 702rpx;
	margin: 40rpx auto;
	height: 100rpx;
	border-radius: 16rpx;
	font: 400 32rpx/100rpx PingFang SC;
	color: #333;
	display: flex;
	align-items: center;
	span {
		margin-left: 12rpx;
	}
}
</style>
